<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataSource</title>
    <link rel="stylesheet" href="js/layui/css/layui.css"/>
    <link rel="stylesheet" href="css/layui-blue.css"/>
    <script type="text/javascript" src="js/layui/layui.all.js"></script>
</head>
<body style="padding:5px;">
<table class="layui-table" id="per" lay-filter="table_per"></table>
<div id="editPerForm" style="display: none; padding:10px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userPhone" id="userPhone" disabled required lay-verify="" placeholder=""
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限列表</label>
            <div class="layui-input-block" style="padding:10px 0px;">
                <input type="checkbox" name="pachong" value="1" id="pachong" title="爬虫列表">
                <input type="radio" name="self_pachong" id="pachong_1" value="1" title="个人">
                <input type="radio" name="self_pachong" id="pachong_2" value="2" title="所有">
            </div>
            <div class="layui-input-block" style="padding:10px 0px;">
                <input type="checkbox" name="quanju" value="2" id="quanju" title="全局变量">
                <input type="radio" name="self_quanju" id="quanju_1" value="1" title="个人">
                <input type="radio" name="self_quanju" id="quanju_2" value="2" title="所有">
            </div>

            <div class="layui-input-block" style="padding:10px 0px;">
                <input type="checkbox" name="shujuyuan" id="shujuyuan" value="3" title="数据管理">
                <input type="radio" name="self_shujuyuan" id="shujuyuan_1" value="1" title="个人">
                <input type="radio" name="self_shujuyuan" id="shujuyuan_2" value="2" title="所有">
            </div>

            <div class="layui-input-block" style="padding:10px 0px;">
                <input type="checkbox" name="rizhi" id="rizhi" value="4" title="日志管理">
                <input type="radio" name="self_rizhi" id="rizhi_1" value="1" title="个人">
                <input type="radio" name="self_rizhi" id="rizhi_2" value="2" title="所有">
            </div>

            <div class="layui-input-block" style="padding:10px 0px;">
                <input type="checkbox" name="jiben" id="jiben" value="5" title="基本资料">
                <!--<input type="radio" name="self_jiben" value="1" title="个人">-->
                <!--<input type="radio" name="self_jiben" value="2" title="所有" checked>-->
            </div>


        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" style="display: none;" id="resetPer" class="layui-btn layui-btn-primary">重置
                </button>
                <button type="submit" class="layui-btn" lay-submit lay-filter="formEditPer">立即提交</button>
                <button type="submit" class="layui-btn" id="closePer" lay-submit lay-filter="formEditPer2">关闭</button>
            </div>
        </div>
    </form>
</div>
</body>


<script type="text/html" id="buttons">
    <a class="layui-btn layui-btn-sm btn-edit" lay-event="btn-edit" data-userid="{{d.userId}}"
       data-users="{{d.permissions}}" data-userphone="{{d.userPhone}}">赋权</a>
    <a class="layui-btn layui-btn-sm btn-qiyong" lay-event="btn-qiyong" data-userid="{{d.userId}}"
       data-userphone="{{d.userPhone}}">启用</a>
    <a class="layui-btn layui-btn-sm btn-tingyong" lay-event="btn-tingyong" data-userid="{{d.userId}}"
       data-userphone="{{d.userPhone}}">停用</a>
</script>


<script type="text/javascript" src="login/js/jquery-2.1.1.min.js"></script>
<link href="js/toastr/toastr.min.css" rel="stylesheet">
<script src="js/toastr/toastr.min.js"></script>
<script type="text/javascript" src="my/mycommon.js"></script>
<script>
    var $ = layui.$;
    var thisRowUserId = {};
    var thisRowUser = {};
    var thisPageUsers = [];
    var $table = layui.table.render({
        id: 'per',
        elem: '#per',
        url: '/permission/getAllUserInfo',
        async: false,
        method: 'get',
        headers: {Authorization: sessionStorage.getItem("userToken")},
        page: false,
        parseData: function (resp) {
            return {
                code: resp.code,
                msg: resp.message,
                data: resp.data,
                count: resp.data.total
            }
        },
        cols: [[
            {
                title: '用户名',
                width: 150,
                field: 'userPhone',
                align: 'center'
            }, {
                title: '注册时间',
                width: 200,
                field: 'createTime',
                align: 'center'
            }, {
                title: '最近登录时间',
                width: 200,
                field: 'lastLoginTime'
            }, {
                title: '停用/启用',
                width: 150,
                field: 'dataStatus',
                templet: function (thisLog) {
                    console.log(thisLog);
                    var res = "";
                    switch (thisLog.dataStatus) {
                        case 1:
                            res = "启用"
                            break;
                        default :
                            res = "停用"
                            break;

                    }
                    return res;
                },
                align: 'center'
            }, {
                title: '操作',
                align: 'center',
                templet: '#buttons'
            }]]
    })

    $("body").on('click', '.btn-tingyong', function () {
        var userId = $(this).data('userid');
        var userPhone = $(this).data('userphone');
        layui.layer.confirm("您确定要停用用户：" + userPhone + "吗？", {
            title: '停用用户'
        }, function (index) {
            var users = {};
            users.userPhone = userPhone;
            users.userId = userId;
            users.dataStatus = 2;
            myAjax("/permission/blockUp", users, function (result) {
                toastr.success(result.message);

                $table.reload();
            });
            layui.layer.close(index);
        })
    }).on('click', '.btn-qiyong', function () {
        var userId = $(this).data('userid');
        var userPhone = $(this).data('userphone');
        layui.layer.confirm("您确定要启用用户：" + userPhone + "吗？", {
            title: '启用用户'
        }, function (index) {
            $table.reload();
            var users = {};
            users.userPhone = userPhone;
            users.userId = userId;
            users.dataStatus = 1;
            myAjax("/permission/blockUp", users, function (result) {
                toastr.success(result.message);

                $table.reload();
            });
            layui.layer.close(index);
        })
    });

    layui.table.on('tool(table_per)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var thisRowUser = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        console.log("table.on thisRowUser", thisRowUser);
        if (layEvent === 'btn-edit') { //赋权
            var userId = thisRowUser.userId;
            var userPhone = thisRowUser.userPhone;
            $("#editPerForm").css("display", "block");
            $("#resetPer").click();
            $("#userPhone").val(userPhone);
            thisRowUserId = userId;
            var permissions_db = thisRowUser.permissions;

            if (permissions_db) {
                for (var i = 0; i < permissions_db.length; i++) {
                    var thisPerDb = permissions_db[i];
                    if (thisPerDb.perId) {
                        $("#" + thisPerDb.perCode).click();
                        $("#" + thisPerDb.perCode + "_" + thisPerDb.perScope).click();
                    }
                }
            }

            layer.open({
                type: 1,
                content: $("#editPerForm"),
                cancel: function () {
                    // $("#editPerForm").css("display", "none");
                    $("#closePer").click();
                }
            })
        } else if (layEvent === 'del') { //启用
            layer.confirm('真的删除行么', function (index) {
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                //向服务端发送删除指令
            });
        } else if (layEvent === 'edit') { //停用
            //do something

            //同步更新缓存对应的值
            obj.update({
                username: '123'
                , title: 'xxx'
            });
        } else if (layEvent === 'LAYTABLE_TIPS') {
            layer.alert('Hi，头部工具栏扩展的右侧图标。');
        }
    });

    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formEditPer)', function (data) {
            var usersForm = data.field;
            console.log("选中的权限信息", JSON.stringify(usersForm));

            var users = {};
            users.userId = thisRowUserId;
            users.userPhone = usersForm.userPhone;
            var pers = [];

            if (usersForm.pachong) {
                var thisPer = {};
                thisPer.userId = thisRowUserId;
                thisPer.perId = usersForm.pachong;
                thisPer.perScope = usersForm.self_pachong;
                thisPer.perScope= thisPer.perScope? thisPer.perScope:1;
                pers.push(thisPer);
            }
            if (usersForm.quanju) {
                var thisPer = {};
                thisPer.userId = thisRowUserId;
                thisPer.perId = usersForm.quanju;
                thisPer.perScope = usersForm.self_quanju;
                thisPer.perScope= thisPer.perScope? thisPer.perScope:1;
                pers.push(thisPer);
            }
            if (usersForm.shujuyuan) {
                var thisPer = {};
                thisPer.userId = thisRowUserId;
                thisPer.perId = usersForm.shujuyuan;
                thisPer.perScope = usersForm.self_shujuyuan;
                thisPer.perScope= thisPer.perScope? thisPer.perScope:1;
                pers.push(thisPer);
            }
            if (usersForm.rizhi) {
                var thisPer = {};
                thisPer.userId = thisRowUserId;
                thisPer.perId = usersForm.rizhi;
                thisPer.perScope = usersForm.self_rizhi;
                thisPer.perScope= thisPer.perScope? thisPer.perScope:1;
                pers.push(thisPer);
            }
            if (usersForm.jiben) {
                var thisPer = {};
                thisPer.userId = thisRowUserId;
                thisPer.perId = usersForm.jiben;
                pers.push(thisPer);
            }
            users.pers = pers;
            console.log("选中的权限信息", JSON.stringify(users));
            myAsyncAjax("/permission/addPermission", users, function (result) {
                layui.layer.msg(result.message, {time: 1000}, function () {
                    $table.reload();
                })
                // toastr.success(result.message);
                // $("#closePer").click();
            });

            return false;
        });
    });

</script>
</html>